<template>
  <Card>
    <p slot="title">上传数据集</p>
    <Form :model="upload":rules="rules" @keydown.enter.native="dataSubmit">
      <FormItem prop="dataSetName">
        <Input v-model="upload.dataSetName" type="text" id="dataSetName" placeholder="请输入数据集名字" style="width: 260px">
        <span slot="prepend">
          <Icon type="ios-image"  slot="prefix"/>
        </span>
        </Input>
      </FormItem>
      <FormItem prop="dataSetDes">
        <Input v-model="upload.dataSetDes" type="textarea" :rows="4" id="dataSetDes" placeholder="输入对数据集的描述" style="width: 260px" />
      </FormItem>
      <FormItem prop="dataSet">
        <Upload :action="uploadUrl" :headers="headers" :on-success="getResult" accept=".ZIP,.RAR" name="fileUrl" >
          <Button icon="ios-cloud-upload-outline" style="width:265px">上传</Button>
        </Upload>
      </FormItem>
      <Button type="primary" long @click="dataSubmit">提交</Button>
    </Form>
  </Card>
</template>

<script>
  import {url} from '../../../config/url'
  import index from '../../store/index'
    export default {
        name: "upload-form",
      props:{
        dataSetNameRules:{
          type:Array,
          default:()=>{
            return[
              {required:true,message:'数据集名字不能为空',trigger:'blur'}
            ]
          }
        },
        dataSetDesRules:{
          type:Array,
          default:()=>{
            return[
              {required:true,message:'数据集描述不能为空',trigger:'blur'}
            ]
          }
        }
      },
      data(){
        return{
          uploadUrl:url+'/file',
          headers:{
            Authorization:index.state.Authorization
          },
          fileUrl:'',
          upload:{
            dataSetName:'',
            dataSetDes:'',
          }
        }
      },
      computed:{
        rules(){
          return{
            dataSetName:this.dataSetNameRules,
            dataSetDes:this.dataSetDesRules,
          }
        }
      },
      methods:{
        //提交数据集名和数据集描述
        dataSubmit(){
          if(this.upload.dataSetDes.length>0&&this.upload.dataSetName.length>0){
            this.$axios.post(url+'/dataset',{
              'name':this.upload.dataSetName,
              'description':this.upload.dataSetDes
            },{
              headers:{
                'Content-Type':'application/json',
              }
            }).then(response => {
                if(response.data.error_code==0){
                  alert("添加数据集成功")
                }
                else{
                  alert("添加数据集失败")
                }
              },(response=>{
                alert("调用服务器失败")
              })
            );
          }else{
            alert("信息不全，不能创建")
          }
        },
        getResult(response){
          this.fileUrl=response.data.fileUrl;
        }
      }
    }
</script>

<style scoped>

</style>
